<script lang="ts" setup>
import { SwitchFilled } from "@element-plus/icons-vue";

// 组件接口
const props = defineProps({
  Tag: {
    type: String,
    required: false,
    default: "分词Console",
  },
});

const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="TopBar_Head"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">
      <el-icon><SwitchFilled /></el-icon>
    </el-menu-item>
    <div class="TopBar_flex-grow" />
    <el-menu-item index="1"> {{ props.Tag }} </el-menu-item>
  </el-menu>
</template>

<style>
.TopBar_Head {
  height: 100%;
}

.TopBar_flex-grow {
  flex-grow: 1;
}
</style>
